<template>
  <div class="app-container">
    <div class="filter-container">
      <statisSearchBar :show-channel="false" :start-date="searchForm.startDate" :end-date="searchForm.endDate" @transferFilter="handleFilter" />
    </div>
    <div ref="echartsContainer" style="width: 100%; height: 700px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import StatisSearchBar from '@/components/StatisSearchBar'
import { getOnlineHistory } from '@/api/statis'

export default {
  name: 'HistoryIndex',
  components: { StatisSearchBar },
  data() {
    return {
      list: [],
      maxOnlineData: [],
      avgOnlineData: [],
      chartxAxisData: [],
      listLoading: false,
      searchForm: {
        startDate: new Date(Date.now() - 86400000 * 10),
        endDate: new Date()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleFilter(query) {
      this.searchForm = query
      this.getList()
    },
    async getList() {
      this.listLoading = true
      const res = await getOnlineHistory(this.searchForm)
      this.listLoading = false
      this.list = res.data
      this.hanleChart()
    },

    hanleChart() {
      this.maxOnlineData = []
      this.avgOnlineData = []
      this.chartxAxisData = []

      this.list.forEach(v => {
        this.chartxAxisData.push(v.date)
        this.maxOnlineData.push(v.max)
        this.avgOnlineData.push(v.avg)
      })

      var myChart = echarts.init(this.$refs.echartsContainer)
      myChart.setOption({
        // ECharts 配置项
        title: {
          text: '历史在线'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['最高在线', '平均在线']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartxAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '最高在线',
            type: 'line',
            smooth: true,
            data: this.maxOnlineData
          },
          {
            name: '平均在线',
            type: 'line',
            smooth: true,
            data: this.avgOnlineData
          }
        ]
      })
    }
  }
}
</script>
